<template>
  <div>
    <div id="container" style="width: 100%; height: 300px"></div>
    <!-- 展示列表 -->
    <el-table :data="branchs">
      <el-table-column label="id" prop="branchId" width="50" />
      <el-table-column label="分店名称" prop="branchName" width="130" />
      <el-table-column label="详细地址" prop="address" width="330" />
      <el-table-column label="省份" prop="province" width="130" />
      <el-table-column label="城市" prop="city" width="130" />
      <el-table-column label="区县" prop="district" width="150" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            icon="position"
            @click="locate(scope.row.branchId)"
            circle
          ></el-button>
          <el-button
            type="success"
            icon="edit"
            @click="modify(scope.row.branchId)"
            circle
          ></el-button>
          <el-button
            type="danger"
            icon="delete"
            @click="del(scope.row.branchId)"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 点击修改弹出一个框框 -->
    <el-dialog v-model="dialogFormVisible" title="修改分店信息">
      <el-form style="width: 600px" :model="form" label-width="120px">
        <el-form-item label="分店名称" prop="branchName">
          <el-input v-model="form.branchName"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="form.province"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="form.city"></el-input>
        </el-form-item>
        <el-form-item label="区县" prop="district">
          <el-input v-model="form.district"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" type="success">取消</el-button>
          <el-button @click="confirm" type="primary">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { ElMessage } from "element-plus";
import $http from "@/http";
import Branch from "@/type/Branch";
import { onMounted, reactive, ref, watch } from "vue";
import $store from "@/store";

const branchs: Branch[] = reactive([]);
let map = reactive<any>({});
let marker = reactive<any>({});
let branch = reactive<any>({});
let aMap = reactive<any>({});
const form = ref({
  branchName: "",
  address: "",
  province: "",
  city: "",
  district: "",
  branchId: 0,
});
const dialogFormVisible = ref(false);
// 加载地图
const loadMap = () => {
  (window as any)._AMapSecurityConfig = {
    securityJsCode: "bee20c2976b1de18f0d3ac5c9d5b67d4",
  };
  AMapLoader.load({
    key: "75e8ca8ee8d5e36f3949b602eb79c999", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container");
      aMap = AMap;
    })
    .catch((e) => {
      console.log(e);
    });
};
// 加载分店列表
const load = () => {
  $http.branchApi
    .queryAll()
    .then((res) => {
      //console.log(res)
      branchs.push(...res.data.data);
    })
    .catch((err) => console.log(err));
};
//定位分店
const locate = (id: number) => {
  $http.branchApi
    .queryById(id)
    .then((res) => {
      //console.log(res);
      branch = res.data.data[0];
      let lng = branch.lng;
      let lat = branch.lat;
      let len = Object.keys(marker);
      if (len.length > 0) {
        marker.setPosition([lng, lat]);
      } else {
        marker = new aMap.Marker({
          position: [lng, lat],
        });
      }
      map.add(marker);
      map.setCenter([lng, lat]);
      map.setZoom(19);
    })
    .catch((err) => console.log(err));
};
// 删除分店
const del = (id: number) => {
  //console.log(id)
  $http.branchApi
    .del(id)
    .then((res) => {
      //console.log(res)
      if (res.data.code == 200) {
        ElMessage.success("删除分店成功");
        //删除后，重新加载列表
        branchs.length = 0;
        load();
      }
    })
    .catch((err) => console.log(err));
};
// 修改分店
const modify = (id: number) => {
  dialogFormVisible.value = true;
  $http.branchApi
    .queryById(id)
    .then((res) => {
      console.log(res);
      form.value = res.data.data[0];
    })
    .catch((err) => console.log(err));
  $store.commit("setBranchId", id);
};

// 取消修改分店
const cancel = () => {
  dialogFormVisible.value = false;
};

// 确认修改分店
const confirm = () => {
  //console.log($store.state.branchId)
  let i: number = $store.state.branchId;
  form.value.branchId = i;
  $http.branchApi
    .modify(form.value)
    .then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        ElMessage.success("修改分店信息成功");
        // 修改后，重新加载列表
        branchs.length = 0;
        load();
        dialogFormVisible.value = false;
      }
    })
    .catch((err) => console.log(err));
};

onMounted(() => {
  load();
  loadMap();
});
</script>

<style lang="scss" scoped>
</style>